<template>
  <el-main>
    <el-card v-show="admin">
      <el-table
        :data="this.records"
        style="width: 100%"
        v-loading="loading"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="username"
          label="姓名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="college"
          label="学院"
          width="150">
        </el-table-column>
        <el-table-column
          prop="health"
          label="健康状况"
          width="150">
        </el-table-column>
        <el-table-column
          prop="isout"
          label="是否外出"
          width="150">
        </el-table-column>
        <el-table-column
          prop="work"
          label="工作状态"
          width="150">
        </el-table-column>
        <el-table-column
          prop="beizhu"
          label="备注"
          width="150">
        </el-table-column>
        <el-table-column
          label="启用/禁用"
          width="150">
          <el-switch
            active-value='1' inactive-value='0' v-model="value"
            active-color="#ff4949"
            inactive-color="#13ce66">
          </el-switch>
      </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="this.pageInfo.page"
        :page-size="5"
        layout="total, prev, pager, next, jumper"
        :total="pageinfo.total">
      </el-pagination>
    </el-card>
  </el-main>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .danger-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  import axios from "axios";
  import Cookies from "js-cookie";
  export default {
    computed: {
      showUsername() {
        return Cookies.get("username")
      }
    },
    methods: {
      handleCurrentChange(val) {
        this.handleSelect(val);
        console.log('当前页: ' + val);
      },

      tableRowClassName({row, rowIndex}) {
        if (row.temperature >= 36.7) {
          return 'danger-row';
        } else if (row.temperature <= 36.7) {
          return 'success-row';
        }
        return '';
      },

      handleSelect(current) {
        if (current) {
          this.pageInfo.page = current
        }
        this.loading = true
        axios.post('http://localhost:8088/signinfo/findAll2', {
          page:this.pageInfo.page,
          size:this.pageInfo.size,
          address:this.pageInfo.address,
          username:this.pageInfo.username,
          college:this.pageinfo.college,
          health:this.pageinfo.health,
          total:this.pageInfo.total,
          startTime:this.pageInfo.startTime,
          endTime:this.pageInfo.endTime,
        }).then(res => {
          this.records = res.data.records;
          this.pageinfo = res.data;
          // console.log(res.data.records)
          // console.log(res.data)
        }).finally(() => {
          this.loading = false
        })
      },
      onSubmit() {
        this.handleSelect(1)
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.pageInfo.startTime = '';
        this.pageInfo.endTime = '';
      },
      handleFilterDateRangeChange(e) {
        this.$nextTick(() => {
          if (!e) {
            this.pageInfo[`startTime`] = ''
            this.pageInfo[`endTime`] = ''
          } else {
            this.pageInfo[`startTime`] = e[0];
            this.pageInfo[`endTime`] = e[1];
          }
        })
      },
    },
    created() {
      if (this.showUsername==="admin"){
        this.admin = true
        this.pageInfo.username = ''
      }else {
        this.pageInfo.username = this.showUsername
      }
      this.handleSelect(1);
    },
    data() {
      return {
        admin: false,
        loading: false,
        records: [],
        pageinfo: {},
        pageInfo: {
          address: '',
          username: '',
          college:'',
          health:'',
          current: '',
          startTime: '',
          endTime: '',
          page: '1',
          size: '5',
          total: '',
          value:'1' //此处要和 active-value 类型一致
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        }
      }
    }
  }
</script>
